<div id="map_canvas"></div>

<script src="{__SERVER}/views/js/markerclusterer.js"></script>
<script type="text/javascript">
    var para;
    function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(10.7723797,106.658325),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);
        var marker = new google.maps.Marker({
            map: map,
            draggable:true,

        });


        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            infowindow.close();
            var place = autocomplete.getPlace();
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(17);  // Why 17? Because it looks good.
            }
            var icon = new google.maps.MarkerImage("{__SERVER}/views/images/map/flag-export.png");
            var center = new google.maps.LatLng(place.geometry.location)
//            var image = new google.maps.MarkerImage(
//                place.icon,
//                new google.maps.Size(71, 71),
//                new google.maps.Point(0, 0),
//                new google.maps.Point(17, 34),
//                new google.maps.Size(35, 35));
            marker.setIcon(icon);
            marker.setPosition(place.geometry.location);
           // para = place.geometry.location;
        });

        var contentString =
            '<input id="radius" type="text"/>'+
            '<button  onClick="search()">Search</button>'  ;

//        var contentString = '<div id="content">'+
//            '<div id="siteNotice">'+
//            '</div>'+
//            '<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
//            '<div id="bodyContent">'+
//            '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
//            'sandstone rock formation in the southern part of the '+
//            'Northern Territory, central Australia. It lies 335 km (208 mi) '+
//            'south west of the nearest large town, Alice Springs; 450 km '+
//            '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
//            'features of the Uluru - Kata Tjuta National Park. Uluru is '+
//            'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
//            'Aboriginal people of the area. It has many springs, waterholes, '+
//            'rock caves and ancient paintings. Uluru is listed as a World '+
//            'Heritage Site.</p>'+
//            '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
//            'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
//            '</div>'+
//            '</div>';

        var infowindow = new google.maps.InfoWindow({
                content: contentString
            });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });


//        var marker = new google.maps.Marker({
//            map: map,
//            position: center ,
//            icon: icon,
//            title:"Trung Tâm Bản Đồ"
//        });
//        marker.setMap(map);


        var populationOptions = {
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35,
            map: map,
            center: center,
            radius: {radius}*1000
        };
        var cityCircle = new google.maps.Circle(populationOptions);

        var data = {data1};
        var markers = [];
        $.each(data, function(key, value){
            var coor = new google.maps.LatLng(value.lat, value.lng);
            var icon = new google.maps.MarkerImage("{__SERVER}/views/images/map/condominium.png");
            var marker = new google.maps.Marker({
                map: map,
                position: coor,
                icon: icon,
                title:value.rid
            });

            markers.push(marker);



        });
        var markerCluster = new MarkerClusterer(map, markers);


    }
    initialize();
    function search(){
//        alert(document.getElementById("radius").value);
        alert(para);
        window.location.replace("http://localhost/photro/map/redius?para="+para+"&d="+document.getElementById("radius").value);

    }
</script>